<template>
  <div class="timeSlot">
    <el-date-picker
      v-model="value"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format='yyyy-MM-dd HH:mm:ss'
      align="right"
      popper-class="time"
      @change="TimeEmit"
    ></el-date-picker>
  </div>
</template>
<script>
import TimeFormate from "./imageSearch/TimeFormate.js"
export default {
    name:'timeSlot',
  data() {
    return {
        value:'',
         pickerOptions: {
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              var start  =  TimeFormate(new Date(),false);
              var  end= TimeFormate(new Date(),true);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods :{
    TimeEmit(e){
      if(e){
        var time={
          startTime :e[0],
          endTime:e[1]
        }
        this.$emit('TimeEmit',time)
      }else{
        var time={
          startTime :null,
          endTime:null
        }
        this.$emit('TimeEmit',time)
      }
    }
  }
};
</script>
<style lang="scss">
.timeSlot {
    display: inline-block;
    .el-date-editor .el-range__icon {
        line-height: 23px;
    }
    .el-date-editor .el-range-separator {
    line-height: 23px;
    margin-right: 7px;
    color: #ffffff;
   }
   .el-input__inner{
       background: rgba(0,0,0,0.0) !important;
       color: #fff;
       border:1px solid #444850 !important;
   }
   .el-range-input {
       background: rgba(0,0,0,0.0) ;

   }
   .el-date-editor .el-range-input{
       color:#fff;
   }

}

</style>